<template>
  <div class="app-container">
    <!-- 添加或修改酒店对话框 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="edit-form" :style="{'height': formHeight}">
        <el-row>
          <el-col :span="22">
            <el-form-item label="店铺信息" prop="sysStoresId">
              <el-select
                ref="sysStoresId"
                v-model="form.sysStoresId"
                filterable
                remote
                reserve-keyword
                default-first-option
                style="width: 100%"
                placeholder="请输入店铺名称检索"
                :remote-method="getSysStoresList"
                :loading="sysStoresLoading">
                <el-option
                  v-for="item in sysStoresOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="酒店名称" prop="name">
              <el-input ref="name" v-model="form.name" placeholder="请输入酒店名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="酒店类型" prop="type">
              <el-select ref="type" v-model="form.type" placeholder="请选择酒店类型">
                <el-option
                  v-for="dict in dict.type.shop_hotel_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" v-hasPermi="['shop:hotel:rec']">
            <el-form-item label="推荐指数" prop="recValue">
              <el-input v-model="form.recValue" placeholder="请输入推荐指数，例：5 或 4.9" :maxlength="4"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="开业时间" prop="openDate">
              <el-date-picker clearable
                v-model="form.openDate"
                type="date"
                value-format="yyyy"
                placeholder="请选择开业时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="装修时间" prop="decoDate">
              <el-date-picker clearable
                v-model="form.decoDate"
                type="date"
                value-format="yyyy"
                placeholder="请选择装修时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="楼层" prop="floorNum">
              <el-input-number v-model="form.floorNum" placeholder="请输入楼层" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="房间数量" prop="roomNum">
              <el-input-number v-model="form.roomNum" placeholder="请输入房间数量" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="服务电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入服务电话" maxlength="13"/>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="人均消费（元）" prop="price">
              <el-input v-model="form.price" placeholder="请输入人均消费" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入经度" />
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入纬度" />
            </el-form-item>
            <el-form-item>
              <el-card>
                <a href="https://lbs.qq.com/getPoint/" target="_blank" style="color: blue; width: 100px; float: inside">点我取点 </a>
                或点击右侧地图自动选点 <br/>例:【38.145905,114.516479】38.145905是维度，114.516479是经度
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="11">
<!--            <el-card>-->
              <tx-map @selected="mapSelected" image="" height="500px;" :latitude="form.latitude" :longitude="form.longitude"/>
<!--            </el-card>-->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in dict.type.shop_business_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="亮点-多选" prop="feature">
              <el-tooltip content="可自定义输入亮点" placement="top">
                <el-select
                  v-model="feature"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  style="width: 100%"
                  placeholder="请选择或输入亮点">
                  <el-option
                    v-for="item in featureOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="酒店地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入酒店地址" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="缩略图" prop="imgAbbrev">
              <image-upload v-model="form.imgAbbrev" :biz-id="hotelId" biz-code="SHOP_HOTEL_ABBREV" :limit="1" @input="imgAbbrevChange"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="轮播图" prop="imgDetail">
              <image-upload v-model="form.imgDetails" :biz-id="hotelId" biz-code="SHOP_HOTEL_DETAIL" zoom="0"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="酒店详情">
              <editor v-model="form.content" :min-height="192"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-collapse :value="['1','2','3']">
              <el-collapse-item title="订房必读" name="1">
                <el-col :span="22">
                  <el-form-item label="入住方式" prop="checkInProcess">
                    <el-input v-model="form.checkInProcess" placeholder="请输入订房必读-入住方式" type="textarea"/>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="重要通告" prop="notice">
                    <el-input v-model="form.notice" placeholder="请输入订房必读-重要通告" type="textarea"/>
                  </el-form-item>
                </el-col>
              </el-collapse-item>
              <el-collapse-item title="酒店政策" name="2">
                <el-col :span="11">
                  <el-form-item label="入住时间" prop="checkInTime">
                    <el-time-picker clearable
                                    v-model="form.checkInTime"
                                    type="time"
                                    value-format="HH:mm"
                                    placeholder="请选择酒店政策-入住时间">
                    </el-time-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="离店时间" prop="checkOutTime">
                    <el-time-picker clearable
                                    v-model="form.checkOutTime"
                                    type="time"
                                    value-format="HH:mm"
                                    placeholder="请选择酒店政策-离店时间">
                    </el-time-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="接待人群" prop="receptionCrowd">
                    <el-input v-model="form.receptionCrowd" placeholder="请输入酒店政策-接待人群" type="textarea"/>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="儿童" prop="isChildren">
                    <el-input v-model="form.isChildren" placeholder="请输入酒店政策-儿童政策" type="textarea"/>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="加床" prop="extraBed">
                    <el-input v-model="form.extraBed" placeholder="请输入酒店政策-加床" type="textarea"/>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="洗漱用品" prop="toiletry">
                    <el-input v-model="form.toiletry" placeholder="请输入酒店政策-洗漱用品" type="textarea"/>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="宠物" prop="petReq">
                    <el-input v-model="form.petReq" placeholder="请输入酒店政策-宠物政策" type="textarea"/>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="支付方式-多选" prop="payMethods">
                    <el-tooltip content="可自定义输入支付方式" placement="top">
                      <el-select
                        v-model="payMethods"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        style="width: 100%"
                        placeholder="请选择或输入支付方式">
                        <el-option
                          v-for="item in payMethodsOptions"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-tooltip>
<!--                    <el-input v-model="form.payMethods" placeholder="请输入酒店政策-支付方式-建议使用 @@ 符号分隔多项" type="textarea" title="建议使用 @@ 符号分隔多项"/>-->
                  </el-form-item>
                </el-col>
              </el-collapse-item>
              <el-collapse-item title="设施服务-多选" name="3">
                <el-col :span="22">
                  <el-form-item label="商务服务" prop="businessServices">
                    <el-tooltip content="可自定义输入商务服务" placement="top">
                      <el-select
                        v-model="businessServices"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        style="width: 100%"
                        placeholder="请选择或输入商务服务">
                        <el-option
                          v-for="item in businessServicesOptions"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-tooltip>
<!--                    <el-input v-model="form.businessServices" placeholder="请输入设施服务-商务服务-建议使用 @@ 符号分隔多项" type="textarea" title="建议使用 @@ 符号分隔多项"/>-->
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="交通服务" prop="jiocServieces">
                    <el-tooltip content="可自定义输入交通服务" placement="top">
                      <el-select
                        v-model="jiocServieces"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        style="width: 100%"
                        placeholder="请选择或输入交通服务">
                        <el-option
                          v-for="item in jiocServiecesOptions"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-tooltip>
<!--                    <el-input v-model="form.jiocServieces" placeholder="请输入设施服务-交通服务-建议使用 @@ 符号分隔多项" type="textarea" title="建议使用 @@ 符号分隔多项"/>-->
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="餐饮服务" prop="restaurantServices">
                    <el-tooltip content="可自定义输入餐饮服务" placement="top">
                      <el-select
                        v-model="restaurantServices"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        style="width: 100%"
                        placeholder="请选择或输入餐饮服务">
                        <el-option
                          v-for="item in restaurantServicesOptions"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-tooltip>
<!--                    <el-input v-model="form.restaurantServices" placeholder="请输入设施服务-餐饮服务-建议使用 @@ 符号分隔多项" type="textarea" title="建议使用 @@ 符号分隔多项"/>-->
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="通用设施" prop="publicServices">
                    <el-tooltip content="可自定义输入通用设施" placement="top">
                      <el-select
                        v-model="publicServices"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        style="width: 100%"
                        placeholder="请选择或输入通用设施">
                        <el-option
                          v-for="item in publicServicesOptions"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-tooltip>
<!--                    <el-input v-model="form.publicServices" placeholder="请输入设施服务-通用设施-建议使用 @@ 符号分隔多项" type="textarea" title="建议使用 @@ 符号分隔多项"/>-->
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="前台服务" prop="receptionServices">
                    <el-tooltip content="可自定义输入前台服务" placement="top">
                      <el-select
                        v-model="receptionServices"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        style="width: 100%"
                        placeholder="请选择或输入前台服务">
                        <el-option
                          v-for="item in receptionServicesOptions"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-tooltip>
<!--                    <el-input v-model="form.receptionServices" placeholder="请输入设施服务-前台服务-建议使用 @@ 符号分隔多项" type="textarea" title="建议使用 @@ 符号分隔多项"/>-->
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="康体服务" prop="healthServices">
                    <el-tooltip content="可自定义输入康体服务" placement="top">
                      <el-select
                        v-model="healthServices"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        style="width: 100%"
                        placeholder="请选择或输入康体服务">
                        <el-option
                          v-for="item in healthServicesOptions"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-tooltip>
<!--                    <el-input v-model="form.healthServices" placeholder="请输入设施服务-康体服务-建议使用 @@ 符号分隔多项" type="textarea" title="建议使用 @@ 符号分隔多项"/>-->
                  </el-form-item>
                </el-col>
              </el-collapse-item>
            </el-collapse>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script>
import { getHotel, addHotel, updateHotel } from "@/api/shop/hotel";
import {getStores, listStoresByDS} from "@/api/system/stores";

export default {
  name: "HotelAdd",
  dicts: ['shop_hotel_type', 'shop_business_status'],
  data() {
    return {
      // 表单的高度
      formHeight: document.documentElement.scrollHeight - 160 + "px",
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, trigger: "blur", message: "请输入酒店名称" }
        ],
        sysStoresId: [
          { required: true, trigger: "blur", message: "请选择店铺信息" }
        ],
        type: [
          { required: true, trigger: "blur", message: "请选择酒店类型" }
        ],
        imgAbbrev: [
          { required: true, trigger: "blur", message: "请上传缩略图" }
        ],
        imgDetails: [
          { required: true, trigger: "blur", message: "请上传轮播图" }
        ],
      },
      hotelId: null,
      // 商店数据源
      sysStoresOptions: [],
      // 商店选择遮罩
      sysStoresLoading: false,
      // 设施服务-亮点
      featureOptions: [{
        value: '高档型'
      }],
      //  设施服务-亮点接收设置
      feature: [],
      // 设施服务-支付方式
      payMethodsOptions: [{
        value: '现金'
      }, {
        value: '微信'
      }, {
        value: '支付宝'
      }, {
        value: '国内储蓄卡'
      }, {
        value: '国内信用卡'
      }],
      //  设施服务-商务服务接收设置
      payMethods: [],
      // 设施服务-商务服务
      businessServicesOptions: [{
        value: '商务中心'
      }, {
        value: '会议室'
      }, {
        value: '投影仪'
      }, {
        value: '多媒体演播室'
      }],
      //  设施服务-商务服务接收设置
      businessServices: [],
      // 设施服务-交通服务
      jiocServiecesOptions: [{
        value: '租车服务'
      }, {
        value: '送站服务'
      }],
      //  设施服务-交通服务接收设置
      jiocServieces: [],
      // 设施服务-餐饮服务
      restaurantServicesOptions: [{
        value: '咖啡厅'
      }, {
        value: '茶室'
      }, {
        value: '送餐服务'
      }],
      //  设施服务-餐饮服务接收设置
      restaurantServices: [],
      // 设施服务-通用设施
      publicServicesOptions: [{
        value: '24小时客房服务'
      }, {
        value: '大堂吧'
      }, {
        value: '无障碍设施'
      }, {
        value: '公共吸烟区'
      }, {
        value: '公共休息区'
      }, {
        value: '洗衣服务'
      }, {
        value: '熨衣服务'
      }, {
        value: '电梯'
      }],
      //  设施服务-通用设施接收设置
      publicServices: [],
      // 设施服务-前台服务
      receptionServicesOptions: [{
        value: '大堂经理'
      }, {
        value: '前台贵重物品保险柜'
      }, {
        value: '礼宾服务'
      }, {
        value: '叫车服务'
      }, {
        value: '叫醒服务'
      }, {
        value: '外币兑换服务'
      }, {
        value: '多国语音服务人员'
      }],
      //  设施服务-前台服务接收设置
      receptionServices: [],
      // 设施服务-康体服务
      healthServicesOptions: [{
        value: '桑拿'
      }],
      //  设施服务-康体服务接收设置
      healthServices: []
    };
  },
  created() {
    this.reset();
    const hotelId = this.$route.query && this.$route.query.hotelId;
    if (hotelId) {
      this.hotelId = Number(hotelId)
      this.getInfo(hotelId);
    }
    this.getSysStoresList();
  },
  methods: {
    /** 查询酒店详情 */
    getInfo(id) {
      getHotel(id).then(response => {
        this.form = response.data;
        this.feature = this.stringToList(this.form.feature);
        this.payMethods = this.stringToList(this.form.payMethods);
        this.businessServices = this.stringToList(this.form.businessServices);
        this.jiocServieces = this.stringToList(this.form.jiocServieces);
        this.restaurantServices = this.stringToList(this.form.restaurantServices);
        this.publicServices = this.stringToList(this.form.publicServices);
        this.receptionServices = this.stringToList(this.form.receptionServices);
        this.healthServices = this.stringToList(this.form.healthServices);
      });
    },
    /** 查询基本店铺列表 */
    getSysStoresList(query) {
      if (query !== '') {
        this.sysStoresLoading = true;
        const queryParams = {
          name: query
        }
        listStoresByDS(queryParams).then(response => {
          this.sysStoresOptions = response.rows;
          this.sysStoresLoading = false;
        });
      }
    },
    // 取消按钮
    cancel() {
      const obj = { path: "/shop/hotel/hotel" };
      this.$tab.closeOpenPage(obj);
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        imgAbbrev: null,
        type: null,
        recValue: null,
        openDate: null,
        decoDate: null,
        floorNum: null,
        roomNum: null,
        phone: null,
        address: null,
        longitude: null,
        latitude: null,
        checkInProcess: null,
        notice: null,
        content: null,
        price: null,
        status: '1',
        feature: null,
        checkInTime: null,
        checkOutTime: null,
        receptionCrowd: null,
        isChildren: null,
        extraBed: null,
        toiletry: null,
        businessServices: null,
        jiocServieces: null,
        restaurantServices: null,
        publicServices: null,
        petReq: null,
        payMethods: null,
        receptionServices: null,
        healthServices: null,
        isDel: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid, object) => {
        if (valid) {
          this.buildOther();
          if (this.form.id != null) {
            updateHotel(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addHotel(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.form.id = response.data.id;
              this.hotelId = response.data.id;
            });
          }
        } else {
          let str = []
          for (let key in object) {
            object[key].map(item => {
              str.push(item.message)
            })
            let dom = this.$refs[Object.keys(object)[0]]
            if (Object.prototype.toString.call(dom) !== '[object Object]') {
              dom = dom[0]
              break
            }
            // 定位代码
            dom.$el.scrollIntoView({
              block: 'center',
              behavior: 'smooth'
            });
          }
          this.$modal.msgError(str.join(', '));
        }
      });
    },
    async buildOther() {
      this.form.feature = this.listToString(this.feature);
      this.form.payMethods = this.listToString(this.payMethods);
      this.form.businessServices = this.listToString(this.businessServices);
      this.form.jiocServieces = this.listToString(this.jiocServieces);
      this.form.restaurantServices = this.listToString(this.restaurantServices);
      this.form.publicServices = this.listToString(this.publicServices);
      this.form.receptionServices = this.listToString(this.receptionServices);
      this.form.healthServices = this.listToString(this.healthServices);
    },
    /** 提取url到form，用于保存 */
    imgAbbrevChange(val) {
      if (val && val.length) {
        this.form.imgAbbrev = val[0].zoomUrl;
      }
    },
    // 对象转成指定字符串分隔
    listToString(list, separator) {
      let strs = "";
      separator = separator || "@@";
      for (let i in list) {
        strs += list[i] + separator;
      }
      return strs !== '' ? strs.substr(0, strs.length - 2) : '';
    },
    // 对象转成指定字符串分隔
    stringToList(string, separator) {
      if (string) {
        separator = separator || "@@";
        var list = string.split(separator);
        return list;
      }
      return [];
    },
    mapSelected(point) {
      this.form.latitude = point.lat;
      this.form.longitude = point.lng;
    }
  }
};
</script>
<style>
.el-collapse-item__header {
  font-size: 23px;
  color: #1890ff;
}
.edit-form {
  overflow-y: auto;
}
</style>
